<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Commentary</title>
<!-- JqueryUI -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery-ui.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<!-- Awesome font icons -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css" media="screen">
<!-- Owlcoursel -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.transitions.css">
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/magnific-popup/magnific-popup.css">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css" media="screen">
<!-- Fw -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/fw.css" media="screen">
</head>
<body class="bg-m">

 

<div class="preloader">
	<i class="fa fa-spinner"></i>
</div>
<header>
	<div class="container">
		<div class="row top-header">
			<div class="col-sm-3 text-left">
				<a href="#" class="logo">
					<img src="${pageContext.request.contextPath}/images/logo.png" alt="logo">
				</a>
			</div>				
			<div class="col-sm-9">
				<ul class="top-link pull-right">
				
					<li class="dropdown hidden-xs">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>
						<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
							<li><a href="login.jsp">Login</a></li>
							<li><a href="register.jsp">Register</a></li>
							<li><a href="#">Log out</a></li>
						</ul>
					</li>
					<li class="pull-right">
						<div class="cart dropdown">
							<a href="#" class="cart-item dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span>2</span><i class="fa fa-cart-plus"></i>
							</a>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
								<li>
									<div class="media">
										<div class="media-left">
											<a href="#">
												<img class="media-object" src="${pageContext.request.contextPath}/images/9.jpg" width="50" alt="...">
											</a>
										</div>
										<div class="media-body">
											<h4 class="product-name">Strawberry</h4>
											<p>$15.0<span> x 3</span> <i class="fa fa-remove"></i></p>
										</div>
									</div>
								</li>
								<li>
									<div class="media">
										<div class="media-left">
											<a href="#">
												<img class="media-object" src="${pageContext.request.contextPath}/images/8.jpg" width="50" alt="...">
											</a>
										</div>
										<div class="media-body">
											<h4 class="product-name">Red bell pepper</h4>
											<p>$15.0<span> x 3</span> <i class="fa fa-remove"></i></p>
										</div>
									</div>
								</li>
								<li class="table-div">
									<ul class="table-content">
										<li class="row m-0">
											<div class="col col-xs-6">
												<strong>Total:</strong>
											</div>
											<div class="col col-xs-6 color-3 f-bold">
												$90.00
											</div>
										</li>
									</ul>
								</li>
								<li>
									<p>
										<a href="#" class="btn ht-btn bg-3">Checkout</a>
										<a href="#" class="btn ht-btn bg-6">Cart</a>
									</p>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="bg-mn color-inher">
			<div class="row m-0">
				<div class="col-sm-1 col-md-1 col-lg-2 p-0">
					<div class="dropdown category-bar">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
							<i class="fa fa-bars"></i><span>Categories</span>
						</a>
						
					</div>
				</div>
				<div class="col-sm-8 col-md-8 col-lg-7 p-0">
					<div class="main-menu">
						<nav class="navbar navbar-default menu">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed m-r-xs-15" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav"> 
									<li><a href="${pageContext.request.contextPath}/home">Home</a></li>
									<li><a href="about.jsp">About</a></li>
									<li><a href="login.jsp">Login</a></li>
									<li><a href="register.jsp">Register</a></li>
									<li><a href="#">Contact us</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>	
				<div class="col-sm-3 col-md-3 col-lg-3 p-0">
					<div class="search-box m-l-xs-15 m-r-xs-15">
						<input type="text" class="form-item" placeholder="Search...">
						<button type="submit" class="fa fa-search"></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
</header>
<!-- Banner -->
<div class="container  m-t-30">
  <div class="ht-tabs ht-tabs-product text-center">
   	<h3 class="title f-30">Customer Commentary</h3>
  </div>
  <%-- <c:if test="${commentaryVOs == null}">
  	<h1>还没有人评价哦</h1>
  </c:if> --%>
  <c:forEach items="${commentaryVOs}" var="c">
  	<div class="panel panel" style="height: 150px;border-color: green; margin-right:20%;">
	<div class="panel-heading" style="background-color: #73CA63;height:30px">
		<span>${c.customerName}</span>
		<span>${c.customerCommentaryDate }</span>
	</div>
	<div class="panel-body">
		${c.customerCommentary }
		
	</div>
	
	</div>
	<div  style="height: 50px;border-color: green; margin-right:20%; margin-top:-30px;">
	<div  style="background-color: #73CA63;height:30px;">
		<c:if test="${c.merchantCommentary != null }">
			<div style="margin-left:10px">
				<span>Merchant:${c.merchantName}</span>
				<span>${c.merchantCommentaryDate }</span>
			</div>
			
			<div  style="background-color: #73CA63;height:30px">
				<div style="margin-left:10px">
					<span>${c.merchantCommentary }</span>
				</div>
			</div>
		</c:if>
	</div>
	
	</div>
	<div style="height:50px"></div>
	
  </c:forEach>
  

</div>


</div>
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${pageContext.request.contextPath}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${pageContext.request.contextPath}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${pageContext.request.contextPath}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${pageContext.request.contextPath}/js/script.js"></script>
</body>
</html>